<template>
  <div id="contain" @showTooltip="showTooltip()">
    <div
        id="screen"
        :style="{
        width: `${style.width}px`,
        height: `${style.height}px`,
        transform: `${style.transform}`,
      }"
    >
      <div id="box">
        <!-- 标题 -->
        <div class="header flex position-r">
          <!-- 全屏显示 -->
          <div
              style="margin-left: 175px; margin-top: 20px"
              class="btn-fullscreen"
          >
            <template>
              <el-button v-if="fullscreen" type="text" @click="offScreenCli"
              >取消全屏
              </el-button
              >
              <el-button
                  v-if="!fullscreen"
                  type="text"
                  @click="handleFullScreen"
              >全屏
              </el-button
              >
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'fullScreenContainer2',
  data () {
    return {
      style: {
        width: '1920',
        height: '1040',
        // transform: "scaleY(1) scaleX(1) translate(-50%, -50%)"
        transform: 'scaleY(1) scaleX(1) '
      },
      fullscreen: false
    }
  },
  mounted () {
    const that = this
    that.setScale()
    window.addEventListener('resize', () => {
      that.setScale()
      if (!that.checkFull()) {
        that.fullscreen = false
        that.setScale()
      }
    })
  },
  methods: {
    // 自适应屏幕
    getScale () {
      if (this.fullscreen) {
        const w = window.innerWidth / this.style.width
        const h = window.innerHeight / this.style.height
        return {
          x: w,
          y: h
        }
      } else {
        const mainContent =
            window.parent.document.getElementsByClassName('app-main')
        // const w = window.innerWidth / this.style.width;
        // const h = window.innerHeight / this.style.height;
        const w = mainContent[0].clientWidth / this.style.width
        const h = mainContent[0].clientHeight / this.style.height

        return {
          x: w,
          y: h
        }
      }
    },
    setScale () {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') '
    },
    handleFullScreen () {
      const elem = document.getElementById('contain')
      this.fullscreen = true
      this.requestFullScreen(elem)
    },
    requestFullScreen (element) {
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },
    // 退出全屏
    offScreenCli () {
      const el = document
      const cfs =
          el.cancelFullScreen ||
          el.webkitCancelFullScreen ||
          el.mozCancelFullScreen ||
          el.exitFullScreen
      if (cfs) {
        cfs.call(el)
      } else if (typeof window.ActiveXObject !== 'undefined') {
        // eslint-disable-next-line no-undef
        const wscript = new ActiveXObject('WScript.Shell')
        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      }
      // this.fullscreen =false;
    },
    //
    checkFull () {
      let isFull =
          document.mozFullScreen ||
          document.fullScreen ||
          // 谷歌浏览器及Webkit内核浏览器
          document.webkitIsFullScreen ||
          document.webkitRequestFullScreen ||
          document.mozRequestFullScreen ||
          document.msFullscreenEnabled
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    },
    show () {
      this.$emit('showTooltip')
    },
    showTooltip () {
      setTimeout(() => {
        if (document.querySelector('.el-dropdown')) {
          this.$refs.contain.appendChild(document.querySelector('.el-dropdown__popper'))
        }
      }, 100)
    }
  }
}

</script>
<style lang="scss" scoped>
#screen {
  z-index: 100;
  // transform-origin: 0 0;
  transform-origin: right bottom;
  position: fixed;
  // left: 50%;
  // top: 50%;
  bottom: 0;
  right: 0;
  transition: 0.3s;
}

#top {
  width: 1920px;
  height: 1080px;
  position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
  bottom: 0%;
  right: 0%;
  // transform-origin: left top;
  transform-origin: right bottom;
  overflow: hidden;
}

#box {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center center;
}
</style>
